<template>
  <div class="content-box">
    <!-- 用戶文章 -->
    <div class="cont">
      <!-- 用户头标签 -->
      <div class="user-info">
        <img :src="data.member_img" />
        <div class="info">
          <div class="user-name">{{ data.member_nickname }}</div>
          <div class="time">{{ getDifferenceTime(data.create_time) }}</div>
        </div>
      </div>
      <!-- 用户 文本标签 -->
      <div class="user-content">
        <!-- <div class="content-info-title">这里是标题</div> -->
        <div v-html="filterContent(data.content)"></div>
      </div>
      <!--用户图片 -->
      <ul class="image-box" v-if="data.img || Array(data.img).length !== 0">
        <li
          v-for="(src, index) in data.img"
          :key="index"
          :class="data.img || Array(data.img).length > 1 ? 'two' : 'one'"
        >
          <img :src="src" />
        </li>
      </ul>
    </div>
    <div class="commentList">最新评论</div>
    <ul class="list">
      <li v-for="item in commentsList" :key="item.comment_id">
        <div class="head"><img :src="item.member_img" /></div>
        <div class="main">
          <div class="comment-user">{{ item.member_nickname }}</div>
          <div class="comment-content">
            {{ item.content }}
          </div>
          <div class="comment-info">
            <div class="time">{{ timestampToTime(item.time) }}</div>
            <div class="like">
              <div class="left">
                <img src="../assets/Thumbs.png" />
                <span>{{ item.like_count }}</span>
              </div>
              <div class="right">回复</div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div class="notanymore">没有更多了</div>
    <div
      :class="commentsList.length > 1 ? 'comments-input1' : 'comments-input2'"
    >
      <div>
        <input type="text" class="comments" />
        <img src="../assets/Thumbs.png" />
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      data: {}, //文章信息
      commentsList: [], //评论列表
    };
  },
  created() {
    this.getData();
    this.getComments();
  },
  computed: {
    ...mapGetters("index", ["changeArticle_id"]),
  },
  methods: {
    async getData() {
      const res = await this.$axios.get(
        `https://api.vgn.cn/apiv2/group/article/${String(
          this.$route.params.id
        )}`
      );
      this.data = res.data;
    },
    async getComments() {
      const res = await this.$axios.get(
        `https://api.vgn.cn/apiv2/group/${String(
          this.$route.params.id
        )}/comment?page=1&page_size=20`
      );
      //
      this.commentsList = res.data;
    },
    filterContent(content) {
      return String(content).replace(/\n/g, "<br>");
    },
    timestampToTime(timestamp) {
      timestamp = timestamp ? timestamp : null;
      let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    getDifferenceTime(createTime) {
      createTime = createTime ? createTime : null;
      const nowData = new Date().getTime();
      let date = nowData - new Date(createTime * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // let s = Math.floor(date / 1000) % 60;
      let m = Math.floor(date / 1000 / 60) % 60;
      let h = Math.floor(date / 1000 / 60 / 60);
      //
      if (h === 0 && m <= 2) {
        return "刚刚";
      } else if (h === 0 && m > 2) {
        return `${m}分钟前`;
      } else if (h !== 0 && h <= 12) {
        return `${h}小时前`;
      } else {
        return this.timestampToTime(createTime);
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/style/index.less";
.content-box {
  background: rgba(238, 238, 238);
  position: absolute;
  .top(0);
  .left(0);
  .right(0);
  .bottom(0);
  .min-height(500);
  overflow: hidden;
  overflow-y: scroll;
  .cont {
    .margin(10,0,10,0);
    background: white;
    // 用户头标签
    .user-info {
      .padding(0,0,0,20);
      .height(60);
      display: flex;
      align-items: center;
      img {
        .width(40);
        .height(40);
        .border-radius(20,20,20,20);
      }
      .info {
        .height(60);
        .margin(0,0,0,10);
        display: inline-block;
        display: flex;
        justify-content: center;
        flex-direction: column;
      }
    }
    // 用户文本标签
    .user-content {
      .padding(0,20,0,20);
    }
    .image-box {
      display: flex;
      flex-wrap: wrap;
      .padding(0,0,20,20);
      .one {
        .margin(4,0,0,4);
        img {
          .width(250);
          .height(120);
        }
      }
      .two {
        .margin(4,0,0,4);
        img {
          .width(105);
          .height(105);
        }
      }
    }
  }
  .commentList {
    .margin(10,0,0,0);
    .padding(0,0,0,20);
    .line-height(50);
    font-size: 20px;
    .width(375);
    .height(50);
    background: white;
  }
  .list {
    .margin(2,0,0,0);
    li {
      .padding(10,0,5,0);
      display: flex;
      background: white;
      .head {
        img {
          .margin(0,0,0,20);
          .width(40);
          .height(40);
          .border-radius(20,20,20,20);
        }
        .border-radius(20,20,20,20);
      }
      .main {
        .width(300);
        border-bottom: 1px solid #ccc;
      }
      .comment-user {
        .margin(5,5,5,10);
        .line-height(15);
      }
      .comment-content {
        .margin(5,5,5,10);
        .line-height(15);
      }
      .comment-info {
        .margin(5,5,5,10);
        .line-height(15);
        .time {
          float: left;
          .line-height(22);
        }
        .like {
          float: right;
          .line-height(22);
          .left {
            float: left;
            img {
              .width(20);
              .height(20);
              .padding(0,0,2,0);
            }
          }
          .right {
            float: right;
            .margin(0,0,0,30);
          }
        }
      }
    }
  }
  .notanymore {
    .width(375);
    .line-height(30);
    text-align: center;
  }
  .comments-input1 {
    position: sticky;
    .height(180);
    .bottom(0);
    .left(0);
    .right(0);
    background: white;
    div {
      .line-height(40);
      .comments {
        .width(250);
        .height(40);
        .margin(10,0,0,20);
        .border-radius(20,20,20,20);
        .padding(0,0,0,30);
        font-size: 20px;
        background: rgba(246, 246, 246);
      }
      img {
        display: inline-block;
        .margin(0,0,0,20);
        .width(20);
        .height(20);
      }
    }
  }
  .comments-input2 {
    position: sticky;
    .height(180);
    .top(500);
    .bottom(0);
    .left(0);
    .right(0);
    background: white;
    div {
      .line-height(40);
      .comments {
        .width(250);
        .height(40);
        .margin(10,0,0,20);
        .border-radius(20,20,20,20);
        .padding(0,0,0,30);
        font-size: 20px;
        background: rgba(246, 246, 246);
      }
      img {
        display: inline-block;
        .margin(0,0,0,20);
        .width(20);
        .height(20);
      }
    }
  }
}
</style>
